<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>导航栏作业</title>
    <style>
        body {
    
        background-image: url('img/symbol-scatter-haikei.svg');
        background-size: cover;
        padding: 50px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    div{
        text-align: left;
    }

    li{
        list-style: none;
    }

    .one_li{
        font-size: large;
       display: inline-block; 
        position: relative;
        background-color: antiquewhite;
    }
    .one_li:hover{
        
        background-color: aqua;
    }

    .one_li:hover .one_ul{
        
        display: inline-block;
    }
    .one_ul
    {
        display:none;
        position: absolute;
        top: 20px;
        left: 10px;
        padding: 10px;
    }

    .two_ul
    {
        display:none;
        position:relative;
        
        left: 50px;
        padding: 15px;
    }
    .two_li:hover .two_ul{
        
        display: flex;
    }

    .two_ul li
    {
        background-color: blueviolet;
        padding: 15px;
    }

    .one_ul>li
    {
        display: flex;
        padding: 5px;
        left: 10px;
        background-color: azure;
    }
    .one_ul li:hover
    {
        background-color: gray;
    }

    </style>
</head>
<body>
    <div>
        
           <li class ="one_li">我是雪豹
           <ul class ="one_ul">

            <li class = "two_li">二>
                <ul class="two_ul">
                    <li>三级</li>
                </ul>
            </li>

            <li class = "two_li">二级</li>
            <li class = "two_li">二级</li>
           </ul>
        </li>
           <li class ="one_li">我是雪豹

            <ul class ="one_ul">
                <li class = "two_li">二级</li>
                <li class = "two_li">二级</li>
                <li class = "two_li">二级</li>
               </ul>
           </li>
           <li class ="one_li">我是雪豹
            <ul class ="one_ul">
                <li class = "two_li">二级</li>
                <li class = "two_li">二级</li>
                <li class = "two_li">二级</li>
               </ul>
           </li>
        </div>
</body>
</html>